<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    :inline="true"
    class="demo-ruleForm demo-form-inline the_form"
  >
    <el-form-item label="商品名称" prop="title">
      <el-input v-model="ruleForm.title"></el-input>
    </el-form-item>
    <el-form-item label="商品分类" prop="class">
      <el-select v-model="ruleForm.class" clearable placeholder="请选择">
        <el-option
          v-for="item in classOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="商品关键词" prop="keyword">
      <el-input v-model="ruleForm.keyword"></el-input>
    </el-form-item>
    <el-form-item label="单位" prop="dw">
      <el-input v-model="ruleForm.dw"></el-input>
    </el-form-item>
    <el-form-item label="商品简介" prop="desc" style="width: 100%">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>

    <el-form-item label="商品封面图" prop="desc">
      <el-upload
        :limit="1"
        action="/upload/tools/saveavatar/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="轮播图" prop="swiperImage">
      <el-upload
        :limit="5"
        action="/upload/tools/saveavatar/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSwiperSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="运费模板" prop="freightTemplate">
      <el-select
        v-model="ruleForm.freightTemplate"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in freightTemplateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        title: "", //，名称
        keyword: "", // 关键词
        desc: "", // 简介
        image: "", // 封面图
        freightTemplate: "", // 运费模板id
        class: "",
        dw: "", //单位
        swiperImage: [],
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        keyword: [
          {
            required: true,
            message: "请输入关键字",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入简介",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        dw: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
      },
      freightTemplateOptions: [
        {
          value: "选项1",
          label: "包邮",
        },
        {
          value: "选项2",
          label: "不包邮",
        },
      ],
      classOptions: [
        {
          value: "选项1",
          label: "手机",
        },
        {
          value: "选项2",
          label: "电脑",
        },
        {
          value: "选项3",
          label: "照相机",
        },
      ],
    };
  },
  methods: {
    //图片上传成功实现本地预览
    handleSwiperSuccess(res, file) {
      this.ruleForm.swiperImage.push(URL.createObjectURL(file.raw)); //表单获取到提交时要传的图片路径
    },
    //图片上传成功实现本地预览
    handleAvatarSuccess(res, file) {
      this.ruleForm.image = URL.createObjectURL(file.raw); //表单获取到提交时要传的图片路径
      console.log(this.ruleForm.image);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resolve("submit!");
          } else {
            reject("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
.the_form {
  & > div {
    width: 48%;
    display: inline-flex !important;
    .el-form-item__content {
      flex: 1;
      .el-select {
        display: block;
      }
    }
  }
}
</style>
